<template>
  <div class="category">
    <!-- 侧边菜单 -->
    <van-sidebar v-model="activeKey" @change="onChange">
      <van-sidebar-item
        v-for="(item, index) in catelist"
        :key="index"
        :title="item.title"
      />
    </van-sidebar>
    <!-- 内容区域 -->
    <div class="wrapper" ref="wrap">
      <ul>
        <li v-for="(item,index) in catelist" :key="index">
          <h1 :ref="`title${index}`">{{item.title}}</h1>
          <van-grid :border="false" :column-num="3">
            <van-grid-item v-for="(itm,idx) in item.list" :key="idx">
              <van-image :src="itm.img" />
              <span>{{itm.title}}</span>
            </van-grid-item>
          </van-grid>
        </li>
      </ul>
      <div class="back" @click="handleBack">返回顶部</div>
    </div>
  </div>
</template>

<script>
import BScroll from "@better-scroll/core";
let arr = [
        {
          title: "家用电器",
          list: [
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
          ],
        },
        {
          title: "家用电器1",
          list: [
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
          ],
        },
        {
          title: "家用电器2",
          list: [
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
          ],
        },
        {
          title: "家用电器3",
          list: [
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
            {
              img: "https://img10.360buyimg.com/focus/s140x140_jfs/t13000/332/1396758917/3756/ebe26c6f/5a1fd6b1N5eb793a3.jpg",
              title: "冰箱",
            },
          ],
        },
      ]
export default {
  data() {
    return {
      activeKey: 0,
      catelist: [],
    };
  },
  mounted() {
    this.catelist = arr
    this.$nextTick(()=>{
      this.bs = new BScroll(this.$refs.wrap, {
        // ...... 详见配置项
        click: true,
      });
    })
  },
  methods: {
    handleBack() {
      console.log(123);
      this.bs.scrollTo(0, 0, 500);
    },
    onChange(index) {
      console.log(index);
      let refname = `title${index}`
      console.log(refname);
      let el = this.$refs[refname][0]
      let top = el.offsetTop
      console.log(top);
      this.bs.scrollTo(0,-top,500)
    },
  },
};
</script>

<style lang="less" scoped>
.category {
  display: flex;
}
.wrapper {
  height: 100vh;
  // border: 1px solid red;
  flex: 1;
  // overflow: scroll;
  overflow: hidden;
  li {
    // line-height: 30px;
    margin: 30px 0;
    // background: orange;
  }
  h1{
    margin: 30px 0;
  }
}
.back {
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3);
  position: fixed;
  bottom: 10px;
  right: 10px;
}
</style>
